<template>
	<view class="company-container">
		<!-- 顶部 -->
		<view class="top">
			<view class="space-between">
				<view class="company">
					<text class="name">{{ company.fullName || '暂无数据' }}</text>
					<text class="require">
						{{ company.industryName || '暂无数据' }} · {{ company.scale || '暂无数据' }}
					</text>
				</view>
				<image class="logo" :src="company.logo || '/static/img/company.png'"></image>
			</view>
		</view>
		<!-- 时间 -->
		<view class="time">
			<view class="require">
				<view class="item">
					<text class="yzb yzb-gongzuobao top-icon"></text>
					<text>{{ company.workTime || '暂无数据' }}</text>
				</view>
				<view class="item">
					<text class="yzb yzb-shoucang1 top-icon"></text>
					<text>{{ company.weekend || '暂无数据' }}</text>
				</view>
				<view class="item">
					<text class="yzb yzb-xueli top-icon"></text>
					<text>{{ company.workOvertime || '暂无数据' }}</text>
				</view>
			</view>
			<view class="welfare">
				<text class="items" v-for="(item, index) in company.welfare" :key="index">{{ item.name }}</text>
			</view>
		</view>
		<!-- 地址 -->
		<view class="address">
			<text class="title">公司地址</text>
			<view class="space-between">
				<view class="column">
					<text class="yzb label-icon yzb-location"></text>
					<text class="info">{{ company.address || '暂无数据' }}</text>
				</view>
			</view>
		</view>
		<!-- 介绍 -->
		<view class="detail">
			<text class="title">公司介绍</text>
			<view class="desc">
				<textarea :value="company.introduce" auto-height disabled="true" :maxlength="-1"></textarea>
			</view>
		</view>
		<!-- 图片 -->
		<view class="photo">
			<text class="title">公司图片</text>
			<uv-scroll-list :indicator="false">
				<view v-for="(item, index) in fileList" :key="index">
					<image :src="item" style="height: 200px;margin-right: 30rpx;"></image>
				</view>
			</uv-scroll-list>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { getCompanyDetail } from '@/apis/company/index.js';

export default {
	data() {
		return {
			company: {},
			fileList: []
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onLoad(option) {
		this.initData(option.id);
	},
	// mounted() {
	// 	this.initData();
	// },
	methods: {
		async initData(id) {
			let companyId;
			if (this.userInfo.role === 'company') {
				companyId = this.userInfo.companyId;
			} else {
				companyId = id;
			}

			const res = await getCompanyDetail(companyId);
			if (res.code === 200) {
				this.company = res.data;
				this.fileList = res.data.photos.map(item => item.url);
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}

text {
	font-size: 28rpx;
}
</style>

<style lang="scss" scoped>
.space-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.company-container {
	padding: 20rpx;
	box-sizing: border-box;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 30rpx 0 20rpx 0;
	}
	.top {
		padding: 30rpx 0;
		.company {
			display: flex;
			flex-direction: column;
		}
		.name {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
		}
		.logo {
			width: 150rpx;
			height: 150rpx;
			border: 1rpx solid #e4e7ed;
			border-radius: 10rpx;
		}
		.require {
			font-size: 28rpx;
			margin-top: 15rpx;
			color: #666666;
		}
	}
	.time {
		display: flex;
		flex-direction: column;
		padding-bottom: 30rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #e4e7ed;
		.require {
			display: flex;
			flex-direction: row;
			margin-top: 15rpx;
			.item {
				margin-right: 30rpx;
			}
			.top-icon {
				font-size: 32rpx;
				margin-right: 10rpx;
			}
		}
		.welfare {
			display: flex;
			flex-direction: row;
			margin-top: 25rpx;
			flex-wrap: wrap;
			.items {
				font-size: 28rpx;
				padding: 10rpx 20rpx;
				margin-right: 15rpx;
				background-color: #e4e7ed;
				border-radius: 5rpx;
				color: #666666;
				margin-top: 15rpx;
			}
		}
	}
	.address {
		display: flex;
		flex-direction: column;
		padding-bottom: 30rpx;
		border-top: 1rpx solid #e4e7ed;
		.info {
			font-size: 32rpx;
			padding: 10rpx;
			line-height: 1.5;
		}
	}
	.detail {
		display: flex;
		flex-direction: column;
		padding-bottom: 30rpx;
		border-top: 1rpx solid #e4e7ed;
		.desc {
			textarea {
				width: 100%;
				font-size: 16px;
				line-height: 26px;
				color: #606266;
			}
		}
	}
	.photo {
		display: flex;
		flex-direction: column;
		border-top: 1rpx solid #e4e7ed;
		padding-bottom: 30rpx;
	}
}
</style>
